<template>

  <div class="app-container">
    <el-container>
      <el-header>
        <el-form :inline="true" :model="searchForm">

          <el-form-item label="搜索page" class="mt-form-item-left">
            <el-select v-model="searchForm.selected_page" filterable clearable @change="handleSearch">
              <el-option label="所有" value="" />
            </el-select>
          </el-form-item>

          <el-form-item label="状态" class="mt-form-item-left">
            <el-select v-model="searchForm.selected_status" filterable clearable>
              <el-option
                v-for="(item,index) in searchForm.dataStatus"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="mt-form-item-search">
            <el-input
              v-model="kwInput"
              placeholder="搜索关键词"
              clearable
              :autosize="{ minRows: 4}"
              @keyup.native.enter="handleSearch"
            />
          </el-form-item>

          <el-form-item style="width:94px;">
            <el-checkbox v-model="searchForm.only_no_reply">我关注的</el-checkbox>
          </el-form-item>

          <el-form-item style="width:100px;">
            <el-button type="primary" style="float: right;" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-container :style="styleObject">
        <el-container>
          <el-main>
            <div class=" _9cb_">
              <div v-for="(item,index) in data" :key="index" class="_99s5">
                <div v-html="item.html" />
              </div>
            </div>
          </el-main>
          <el-footer height="30px" style="margin-bottom: 20px">
            <el-pagination
              v-if="data.length"
              background
              class="mt-pagination"
              :current-page="page"
              :page-sizes="[10,20,50,100]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            />
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Get } from '@/api/facebook/facebooklibraryad'
import { Translate } from '@/api/baidu'
import qs from 'qs'

export default {
  filters: {
    colorFilter(v) {
      return v ? `"color":"green"` : `"color":"red"`
    },
    erpFilter(v) {
      return 'http://erp.elicink.com:19870/ps/order?wid=&status=&sort=id_desc&pagesize=50&page=0&isWeb=on&searchKey=' + encodeURI(v)
    }
  },
  data() {
    return {
      styleObject: {
        height: document.documentElement.clientHeight - 150 + 'px'
      },
      base_api: '',
      tags: [],
      tagLoading: false,
      inputVisible: false,
      inputValue: '',

      listLoading: false,
      messageLoading: false,
      searchForm: {
        selected_page: '',
        websites: [],
        dataStatus: ['active', 'inactive'],
        selected_status: 'active',
        only_no_reply: true,
        marked: false
      },
      // 输入
      kwInput: '',
      // pagination
      pagesize: 16,
      page: 1,
      total: 0,

      templates: [],
      dialogLoading: false,
      dialogVisible: false,
      temp: {
        selected_template: null,
        text: ''
      },

      data: [],
      checkedIds: [],

      thread_status: false,
      current_message: {
        id_customer: null,
        id: null,
        id_order: null,
        title: '',
        messages: []
      },
      batch: false,

      notreply: 'notreply',
      hasreply: 'hasreply',

      red: 'm-red',
      blue: 'm-blue'
    }
  },
  created() {
    const m = window.location.href.split('/')
    m.splice(window.location.href.split('/').length - 1, 1)
    this.base_api = m.join('/')
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.styleObject =
            {
              height: document.documentElement.clientHeight - 150 + 'px'
            }
      })()
    }
  },
  methods: {
    handleTranslate(item) {
      if (item.translate_query.length) {
        return
      }
      Translate({ q: item.message }).then((response) => {
        for (var x in response.data.trans_result) {
          item.translate_query = item.translate_query + ' ' + response.data.trans_result[x].dst
        }
      })
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        kw: this.kwInput,
        active: this.searchForm.selected_status,
        pagesize: this.pagesize,
        page: this.page
      })).then(response => {
        this.data = response.data.data
        this.total = response.data.total
        this.listLoading = false
      }).catch(e => {
        this.listLoading = false
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleSearch() {
      this.page = 1
      this.getList()
    }
  }
}
</script>
<style>
@import 'https://static.xx.fbcdn.net/rsrc.php/v3/yk/l/0,cross/CO532eFTMs2.css?_nc_x=SURKgy_mNV4';
@import "https://static.xx.fbcdn.net/rsrc.php/v3/ym/l/0,cross/mqWeLQ1x602.css?_nc_x=SURKgy_mNV4";
@import "https://static.xx.fbcdn.net/rsrc.php/v3/yW/l/0,cross/HJT01p8Rfc5.css?_nc_x=SURKgy_mNV4";
@import "https://static.xx.fbcdn.net/rsrc.php/v3/yH/l/0,cross/wGYNl9ZUlRk.css?_nc_x=SURKgy_mNV4";
@import "https://static.xx.fbcdn.net/rsrc.php/v3/ym/l/0,cross/mj-x_jWPXwT.css?_nc_x=SURKgy_mNV4";

</style>
<style scoped>
  .app-container >>> em {
    color: red;
  }
  .app-container >>> span.accessible_elem {
    display: none;
  }
  .app-container >>> ._99s5 {
    width: calc(25%);
  }
  .mt-message {
    padding: 0 0 0 10px;
    border-left: 2px solid #ccc;

    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .clearfix:before,
  .clearfix:after {
    display: block;
    content: '';
    clear: both;
    height: 0;
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .top {
    margin: 20px;
  }

  .top >>> .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .hasreply {
    display: inline-block;
    width: 100px;
    background-color: #67C23A;
    text-align: center;
    color: black;
  }

  .notreply {
    display: inline-block;
    width: 100px;
    background-color: #F56C6C;
    text-align: center;
    color: black;
  }

  .fixed {
    position: fixed;
    top: 140px;
    overflow-y: scroll;
    height: calc(100% - 264px);
  }

  .fixed::-webkit-scrollbar { /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .fixed::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  }

  .fixed::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /*border-radius: 10px;*/
    background: #EDEDED;
  }

  .mt-href {
    text-decoration: underline;
    color: #409EFF;
  }

  .m-red {
    color: red;
  }

  .m-blue {
    color: #409EFF;
  }

  .mt-form-item-left {
    width: 26%;
    margin-right: 0;
  }

  .el-form-item {
    margin-bottom: 1px;
  }

  .mt-form-item-left >>> .el-form-item__content {
    width: calc(100% - 80px);
  }

  .mt-form-item-left >>> .el-select {
    width: 100%;
  }

  div.is-hover-shadow:hover {
    border-color: red;
  }

  .mt-form-item-search >>> .el-form-item__content {
    width: 100%;
  }
</style>
